<template>
	<view class="content">
		<view class="navList">
			<scroll-view class="scroll-view" :scroll-y="true">
				<view class="scroll-item" @click="tabFn(index)"
					:class="{'active':activeIndex==index,'active-before':activeIndex==index+1,'active-after':activeIndex==index-1}"
					v-for="(item,index) in navList" :key="item.id">
					<image class="activeIcon" v-if="activeIndex==index" src="/static/index/leftTI.png" mode=""></image>
					{{item.title}}
				</view>
			</scroll-view>
		</view>
		<view class="main">
			<view class="search justify-center align-center">
				<u-search class="u-search" height="2.5rem" :show-action="true" v-model="value" placeholder="请输入设备ID"
					placeholderColor="#999" @custom="searchFn" searchIcon="/static/app/search.png" shape="square"
					:disabled="activeIndex!==0" searchIconSize="16">
				</u-search>
			</view>
			<u-loading-icon v-if="loading" text="加载中" textSize="18"></u-loading-icon>
			<scroll-view v-else class="scroll-view2" :scroll-y="true" :scroll-top="scrollViewTop">
				<view v-show="activeIndex==0" class="item" v-for="item in list" :key="item.id"
					@click="toAppDetail(item.id)">
					<view class="title">
						<view class="left">
							<image class="titleIcon" src="/subPages/static/index/moisture/titleIcon.png" mode="">
							</image> {{navList[activeIndex].title}}
						</view>
						<view class="right">
							<view class="inlineStatus" :style="{color:item.isOnline?'#639F66':'#999999'}">
								{{item.isOnline?"在线":"离线"}}
							</view>
						</view>
					</view>
					<view class="item-content">
						<view class="equipmentID align-center inline-flex" @click.stop="copyIdFn(item.stationId)">
							设备ID: {{item.stationId}}
							<image class="copyIcon" src="@/static/app/copy.png" mode=""></image>
						</view>
						<view class="gray">
							最新上报时间: {{item.monitorTime}}
						</view>
						<view class="gray">
							添加设备时间: {{$util.timestampToTime(item.createTime)}}
						</view>
						<view class="gray">
							设备已运行: {{item.runTime}}天
						</view>
					</view>
				</view>
				<view v-show="activeIndex!==0" class="item" v-for="item in list" :key="item.deviceAddr"
					@click="toAppDetail2(item.deviceAddr)">
					<view class="title">
						<view class="left">
							<image class="titleIcon" src="/subPages/static/index/moisture/titleIcon.png" mode="">
							</image> {{navList[activeIndex].title}}
						</view>
						<view class="right">
							<view class="inlineStatus"
								:style="{color:item.deviceStatus === 'normal' ? '#639F66' : item.deviceStatus === 'alarming' ? '#ff0000' : item.deviceStatus === 'preAlarming' ? '#ff0000' : '#999999'}">
								{{item.deviceStatus === 'normal' ? '正常' : item.deviceStatus === 'alarming' ? '报警' : item.deviceStatus === 'preAlarming' ? '预警' : '离线'}}
							</view>
						</view>
					</view>
					<view class="item-content">
						<view class="equipmentID align-center inline-flex" @click.stop="copyIdFn(item.deviceAddr)">
							设备地址: {{item.deviceAddr}}
							<image class="copyIcon" src="@/static/app/copy.png" mode=""></image>
						</view>
						<view class="gray">
							设备编码: {{item.deviceCode}}
						</view>
						<view class="gray">
							报警开关: {{
				    item.alarmSwitch === 1 ? '离线报警' : item.alarmSwitch === 2 ? '超限报警' : item.alarmSwitch === 4 ? '复归通知' : item.alarmSwitch === 3 ? '离线报警+超限报警' : item.alarmSwitch === 5 ? '离线报警+复归通知' : item.alarmSwitch === 6 ? '超限报警+复归通知' : '离线报警+超限报警+复归通知'
				  }}
						</view>
						<view class="gray">
							地址: 庐江县同大镇
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		getMoistureList,
		getMoistureAll,
	} from '@/api/index/equipment.js'

	import {
		getRealDataAnalysis_rk
	} from '@/api/app/dataAnalysis.js'
	export default {
		data() {
			return {
				scrollViewTop: 0,
				pageInfo: {
					pageNo: 1,
					pageSize: 10
				},
				activeIndex: 0,
				value: '',
				navList: [{
						id: 0,
						title: '土壤墒情1'
					},
					{
						id: 1,
						title: '土壤墒情2'
					}, {
						id: 2,
						title: '水质监测'
					}
				],
				list: [],
				loading:true
			}
		},
		onLoad() {
			this.getMoistureListFn()
		},
		methods: {
			// 复制设备id
			copyIdFn(id) {
				let that = this;
				uni.setClipboardData({
					data: String(id),
					success() {
						that.$util.msg('复制成功')
					},
					fail() {
						that.$util.msg('复制失败，请重试')
					}
				})
			},
			// 搜索
			searchFn() {
				this.initFn();
				if (this.activeIndex == 0) {
					this.getMoistureListFn()
				} else if (this.activeIndex == 1) {
					this.getMoistureAllFn()
				} else {
					this.getWaterListFn()
				}
			},
			// 初始化
			initFn() {
				this.scrollViewTop = 0;
				this.pageInfo.pageNo = 1
				this.list = []
			},
			// 切换左侧导航栏
			tabFn(i) {
				this.activeIndex = i;
				this.initFn();
				if (i == 0) {
					this.getMoistureListFn()
				} else if (i == 1) {
					this.getMoistureAllFn()
				} else {
					this.getWaterListFn()
				}
			},
			// 跳转设备详情
			toAppDetail(id) {
				uni.navigateTo({
					url: "/subPages/app/appDetail/index?id=" + id
				})
			},
			// 跳转设备详情2
			toAppDetail2(deviceAddr) {
				uni.navigateTo({
					url: "/subPages/app/appDetail2/index?deviceAddr=" + deviceAddr
				})
			},
			// 请求墒情预警设备
			async getMoistureListFn() {
				this.loading=true;
				let res = await getMoistureList(this.pageInfo);
				this.list = res.list;
				if (this.value.trim()) {
					this.list = this.list.filter(item => item.stationId.includes(this.value))
				}
				this.list.forEach(item => {
					item.runTime = Math.ceil((new Date().getTime() - item.createTime) / 1000 / 60 / 60 / 24)
				})
				this.loading = false;
			},
			// 请求墒情预警设备
			async getMoistureAllFn() {
				this.loading=true;
				let res = await getMoistureAll(this.pageInfo);
				let res3 = await getRealDataAnalysis_rk();
				this.list = res.filter(item => {
					item.deviceStatus = res3.find(v=>v.deviceAddr==item.deviceAddr).deviceStatus
					let waterArr = [21061727, 21061733]
					return !waterArr.includes(item.deviceAddr)
				})
				this.loading = false;
			},
			// 请求水质监测设备
			async getWaterListFn() {
				this.loading=true;
				let res = await getMoistureAll(this.pageInfo);
				let res3 = await getRealDataAnalysis_rk();
				this.list = res.filter(item => {
					item.deviceStatus = res3.find(v=>v.deviceAddr==item.deviceAddr).deviceStatus
					let waterArr = [21061727, 21061733]
					return waterArr.includes(item.deviceAddr)
				})
				this.loading = false;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		// #ifdef APP-PLUS
		height: 100vh;
		// #endif
		// #ifdef H5
		height: calc(100vh - 94px);
		// #endif
		display: flex;
		font-size: 1.4rem;
		box-shadow: inset 0rem .2rem .4rem .1rem rgba(153, 153, 153, 0.051);

		.navList {
			width: 8.5rem;
			background: rgb(245, 245, 245);

			.scroll-view {
				max-height: 100%;
				background: #fff;

				.scroll-item {
					height: 5.5rem;
					line-height: 5.5rem;
					text-align: center;
					position: relative;
					background: rgb(245, 245, 245);

					&:first-child {
						box-shadow: inset 0rem .1rem .2rem .05rem rgba(153, 153, 153, .05);
					}

					.activeIcon {
						width: .5rem;
						height: 2rem;
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
					}
				}

				.scroll-item.active {
					background: #fff;
					color: #639F67;
				}

				.scroll-item.active-before {
					border-radius: 0 0 .8rem 0;
				}

				.scroll-item.active-after {
					border-radius: 0 .8rem 0 0;
				}
			}
		}

		.main {
			flex: 1;

			.search {
				width: 100%;
				height: 5rem;
				padding: 0 1.5rem;
				display: flex;
				justify-content: center;
				align-items: center;

			}

			.scroll-view2 {
				/* #ifdef H5 */
				max-height: calc(100vh - 94px - 5rem);
				/* #endif */
				/* #ifdef APP-PLUS */
				max-height: calc(100vh - 5rem);

				/* #endif */
				.item {
					position: relative;
					padding: 1.5rem;
					font-size: 1.4rem;
					background: #fff;
					margin-top: .5rem;
					box-shadow: .05rem .1rem .15rem .05rem rgba(0, 0, 0, .05);

					&:last-child {
						margin-bottom: .5rem;
					}

					.title {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding-bottom: 1rem;

						.left {
							display: flex;
							align-items: center;
							font-weight: bold;

							.titleIcon {
								height: 1.8rem;
								width: 1.8rem;
								margin-right: .25rem;

							}
						}

						.right {
							.inlineStatus {
								text-align: right;
							}
						}
					}

					.item-content {
						.copyIcon {
							height: 1.5rem;
							width: 1.5rem;
							margin-left: 1rem;
						}

						.equipmentID {
							color: #333;
							font-weight: bold;
							padding-bottom: .5rem;
						}

						.gray {
							padding-bottom: .5rem;
							color: #999;
						}
					}
				}

			}
		}
	}
</style>